{% load static %}<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
    initial-scale=1">
    <title>Material Design for Django</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/idea.min.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/python.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/django.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $('.slider').slider({height:160+$(window).width()/6});
          $('.scrollspy').scrollSpy();
          hljs.initHighlightingOnLoad();
          $('.modal-trigger').leanModal();
          $('ul.tabs').tabs();
      });
    </script>

    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        
        ga('create', 'UA-1602364-9', 'auto');
        ga('require', 'linkid', 'linkid.js');
        ga('require', 'displayfeatures');
        ga('send', 'pageview');
    </script>

    <script type="text/javascript">
      if (navigator.appVersion.indexOf("Win")!=-1) {
           document.write('<link rel="stylesheet" type="text/css" href="{% static 'material/css/robotofix.css' %}">');
      }
    </script>

    <style type="text/css">
      html, body { background: #e5e5e5; height: 100%; }

      nav { 
          height: 250px;
          background-image: url({% static 'img/background.png' %});
      }

      footer {
          background-image: url({% static 'img/background.png' %});
      }

      h1, h2, h3, h4, h5, h6 { 
          font-weight: 300; 
      }

      main { 
          margin-bottom: -150px; 
      }

      main .container {
          position: relative; top: -200px;
      }

      .card-title {
          font-size: 36px;
      }

      .card .card-action {
          border-top: none;
          padding-top: 10px;
      }

      .card a {
          color: #1e88e5;
      }

      .modal {
          background-color: #fff
      }

      .modal .modal-footer {
          background-color: #fff
      }

      .tabs .indicator {
          background-color: #333;
      }

      .tabs li.tab a {
          color: #333;
      }

      .tabs li.tab a:hover  {
          color: #555;
      }

      .hljs-string,
      .hljs-keyword,
      .hljs-tag .hljs-title,
      .hljs-attribute,
      .hljs-value {
          font-weight: 300; 
      }

      .hljs-tag {
          background: transparent;
      }

      @media only screen and (max-width : 600px) {
          .container.expand-on-small-only {
              width: 100% !important;
              padding: 0 0.8rem  !important;
          }
      }
    </style>
  </head>
  <body>
      <header>
          <nav class="green darken-2">
              <div class="nav-wrapper">
                  <ul id="nav-mobile" class="right hide-on-med-and-down">
                      <li><a target="_blank" href="https://github.com/viewflow/django-material"><i class="zmdi zmdi-github zmdi-hc-2x"></i></a></li>
                      <li><a target="_blank" href="https://twitter.com/viewflow"><i class="zmdi zmdi-twitter zmdi-hc-2x"></i></a></li>
                  </ul>
              </div>
          </nav>
      </header>
      <main>
          <div class="container expand-on-small-only">
               <div class="row">
                   <div class="col s12">
                       <div class="card">
                            <div class="card-content">
                                <div class="row" style="padding:50px">
                                    <div class="col s12 l3 center-align">
                                        <img src="{% static 'img/logo.png' %}" height="120px">
                                    </div>
                                    <div class="col s12 l5">
                                        <span class="card-title
                                        black-text">Django-material</span>
                                        <h6>Material design for django</h6>
                                        <h6><a target="_blank" href="http://viewflow.io" style="text-transform:none;margin:0">viewflow.io</a></h6>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col s12 m10 offset-m1">
                                        <div class="divider"></div>
                                        <div id="features" class="section scrollspy">
                                            <h5>Overview</h5>
                                            <h6>Material design with goodies</h6>
                                            <div class="row">
                                                <div class="col m8">
                                                <h5 style="line-height:50px">
                                                    <ul style="margin:0">
                                                        <li><a href="#forms" style="text-transform:none">Forms</a>&ndash; Easy way to render custom django forms
                                                            <ul style="padding-left:20px;font-size:0.7em;line-height:30px">
                                                                <li><i class="green-text mdi-action-done"></i> Strong python/html code separation</li>
                                                                <li><i class="green-text mdi-action-done"></i> Easy redefinition of particular field rendering</li>
                                                                <li><i class="green-text mdi-action-done"></i> Complex form layout support</li>
                                                            </ul>
                                                        </li>
                                                        <li><a href="#frontend" style="text-transform:none">Frontend</a>&ndash; Quick starter template</li>  
                                                    </ul>
                                                </h5>
                                                </div>
                                                <div class="col m4 center-align">
                                                    <br/>
                                                    <a target="_blank" href="/demo/login/">
                                                        <img src="{% static 'img/canvas.png' %}" class="responsive-img">
                                                    </a><br/><br/>
                                                    <a href="#login_form" class="modal-trigger align-right">Source</a>
                                                </div>
                                            </div>
                                            
                                        </div>
                                        <div class="divider"></div>
                                        <div  id="installation" class="section scrollspy">
                                            <h5>Installation</h5><br/>
                                            django-material tested with Python 2.7/3.3, django 1.8

<pre><code class="python">    $ pip install django-material </code></pre>

And add desired apps into INSTALLED_APPS settings

<pre><code class="python">    INSTALLED_APPS = (
        'material',
        'material.frontend',
       ...
    )
</code></pre>
                                        </div>
                                        <div class="divider"></div>
                                        <div id="quick_start" class="section scrollspy">
                                            <h5>Quick start</h5><br/>
Include material javascript and styles along with jQuery into your base template.

<pre><code class="django">    {% templatetag openblock %} include 'material/includes/material_css.html' {% templatetag closeblock %}
    &lt;script src="{% templatetag openblock %} static 'material/js/jquery.js' {% templatetag closeblock %}"&gt;&lt;/script&gt;
    {% templatetag openblock %} include 'material/includes/material_js.html' {% templatetag closeblock %}
</code></pre>

Load the `material_form` template tag library
<pre><code class="django">     {% templatetag openblock %} load material_form {% templatetag closeblock %} </code></pre>

And render your form with {% templatetag openblock %} form {% templatetag closeblock %} template tag
<pre><code class="django">    &lt;form method="POST"&gt;
        {% templatetag openblock %} csrf_token {% templatetag closeblock %}
        {% templatetag openblock %} form form=form {% templatetag closeblock %}{% templatetag openblock %} endform {% templatetag closeblock %}
        &lt;button type="submit" name="_submit" class="btn"&gt;Submit&lt;/button>
    &lt;/form&gt;
</code></pre>

                                        </div>
                                        <div class="divider"></div>
                                        <div  id="docs" class="section scrollspy center-align">
                                            <h5><br/>Read the full documentation at <a href="http://docs.viewflow.io/material_forms.html" style="text-transform:none">http://docs.viewflow.io/</a><br/><br/></h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                       </div>
                   </div>
                   <div class="row col scrollspy" id="forms">
                   <div class="col s12">
                       <h4>Forms samples</h4>
                   </div>
                   <div id="forms2" class="col s12 m3 scrollspy">
                       <div class="card">
                           <div class="card-image">
                               <a target="_blank" href="/demo/registration/">
                                   <img src="{% static 'img/registration.png' %}">
                               </a>
                           </div>
                           <div class="card-action right-align">
                               <a href="#registration_form_code" class="modal-trigger align-right">Code</a>
                               <a href="#registration_form_html" class="modal-trigger align-right">Template</a>
                           </div>
                       </div>
                   </div>
                   <div class="col s12 m3">
                       <div class="card">
                           <div class="card-image">
                               <a target="_blank" href="/demo/order/">
                                   <img src="{% static 'img/order.png' %}">
                               </a>
                           </div>
                           <div class="card-action right-align">
                               <a href="#order_form_code" class="modal-trigger align-right">Code</a>
                               <a href="#order_form_html" class="modal-trigger align-right">Template</a>
                           </div>
                       </div>
                   </div>
                   <div class="col s12 m3">
                       <div class="card">
                           <div class="card-image">
                               <a target="_blank" href="/demo/checkout/">
                                   <img src="{% static 'img/checkout.png' %}">
                               </a>
                           </div>
                           <div class="card-action right-align">
                               <a href="#checkout_form_code" class="modal-trigger align-right">Code</a>
                               <a href="#checkout_form_html" class="modal-trigger align-right">Template</a>
                           </div>
                       </div>
                   </div>
                   <div class="col s12 m3">
                       <div class="card">
                           <div class="card-image">
                               <a target="_blank" href="/demo/bank/">
                                   <img src="{% static 'img/bank.png' %}">
                               </a>
                           </div>
                           <div class="card-action right-align">
                               <a href="#bank_form_code" class="modal-trigger align-right">Code</a>
                               <a href="#bank_form_html" class="modal-trigger align-right">Template</a>
                           </div>
                       </div>
                   </div>
                   </div>
                   <div class="col s12">
                       <div id="frontend" class="card scrollspy">
                           <div class="card-content">
                               <div class="row">
                               <div class="col s8">
                                   <h4>Frontend</h4>
                                   <h6>Quick starter template for modular ERP-like applications development</h6>
                                   <h5>Quick start</h5><br/>
Add frontend urls into global urlconf module at urls.py

<pre><code class="python">from material.frontend import urls as frontend_urls

    urlpatterns = [
        ...
        url(r'', include(frontend_urls)),
]</code></pre>

                               </div>
                               <div class="col s4">
                                   <a href="http://demo.viewflow.io/integration/"><img src="{% static 'img/frontend.png'%}" class="responsive-img" style="border:2px solid grey"/></a>
                               </div>
                               <div class="col s12">
To create a new module make a `modules.py` file, inside app directory, with following content

<pre><code class="python">from material.frontend import Module

    class Sample(Module):
        icon = 'mdi-image-compare'
</code></pre>
By default module expose a single view that renders html template from &lt;module_name&gt;/index.html file.
<br/><br/>
You can override `Module.get_urls()` method to provide module url config that would be automatically included into
global urls.
                               </div>
                           </div>
                       </div>
                   </div>
                   </div>
               </div>
          </div>
      </main>
      <footer class="page-footer green darken-4">
          <div class="container">
              <div class="row">
                  <div class="col l5 m6 s12">
                      <h5 class="white-text">Django-material</h5>
                      <p class="grey-text text-lighten-4">Material design for django</p>
                      <a href="http://viewflow.io" class="white-text">viewflow.io</a>
                  </div>
                  <div class="col l3 m6 s12">
                      <h5 class="white-text">Links</h5>
                      <ul>
                          <li><a class="grey-text text-lighten-3"
                          href="https://github.com/viewflow/django-material">Source code</a></li>
                          <li><a class="grey-text text-lighten-3"
                          href="https://github.com/viewflow/django-material/issues">Bug tracker</a></li>
                          <li><a class="grey-text text-lighten-3"
                          href="https://gitter.im/viewflow/django-material">Chat room</a></li>
                      </ul>
                  </div>
                  <div class="col l4 m6 s12">
                      <h5 class="white-text">Tested with</h5>
                      <a href="http://browserstack.com"><img src="{% static 'img/browserstack_small_white.png' %}"></a>
                  </div>
              </div>
          </div>
          <div class="footer-copyright">
              <div class="container">
                  © 2014-2016 Mikhail Podgurskiy
                  <a class="grey-text text-lighten-4 right"
                  href="http://opensource.org/licenses/BSD-3-Clause">BSD License</a>
              </div>
          </div>
      </footer>

      <ul id="content" class="section table-of-contents hide-on-med-and-down" style="position:fixed; top: 300px; left: 30px">
        <li><a href="#features">Features</a></li>
        <li><a href="#installation">Installation</a></li>
        <li><a href="#quick_start">Quick Start</a></li>
        <li><a href="#docs">Documentation</a></li>
        <li><a href="#forms">Forms samples</a></li>
        <li><a href="#frontend">Frontend Template</a></li>
      </ul>

      <div id="login_form" class="modal">
          <div class="modal-content">
              <h4>Login Form</h4>
              <div class="divider"></div>
              <div class="section">
                  <h5>Code</h5>
                  <pre><code class="python">{{ login.source.rstrip|linebreaksbr }}</code></pre>
              </div>
              <div class="divider"></div>
              <div class="section">
                  <h5>Html</h5>
                  <pre><code class="django">&lt;form method="POST" class="viewform"&gt;{% verbatim %}{% csrf_token %}{% endverbatim %}{{ login.template.origin.source.rstrip|linebreaksbr }}
    &lt;button type="submit" name="_submit" class="btn btn-primary btn-lg"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
                  </code></pre>
              </div>
              <div class="modal-footer">
                  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
          </div>
      </div>

      <div id="registration_form_code" class="modal">
          <div class="modal-content">
              <h4>Registration Form</h4>
              <div class="divider"></div>
              <div class="section">
                  <h5>Code</h5>
                  <pre><code class="python">{{ registration.source.rstrip|linebreaksbr }}</code></pre>
              </div>
              <div class="modal-footer">
                  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
          </div>
      </div>

      <div id="registration_form_html" class="modal">
          <div class="modal-content">
              <h4>Registration Form</h4>
              <div class="divider"></div>
              <div class="section">
                  <h5>Template</h5>
                  <pre><code class="django">&lt;form method="POST" class="viewform"&gt;{% verbatim %}{% csrf_token %}{% endverbatim %}{{ registration.template.origin.source.rstrip|linebreaksbr }}
    &lt;button type="submit" name="_submit" class="btn btn-primary btn-lg"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
                  </code></pre>
              </div>
              <div class="modal-footer">
                  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
          </div>
      </div>

      <div id="order_form_code" class="modal">
          <div class="modal-content">
              <h4>Order Form</h4>
              <div class="divider"></div>
              <div class="section">
                  <h5>Code</h5>
                  <pre><code class="python">{{ order.source.rstrip|linebreaksbr }}</code></pre>
              </div>
              <div class="modal-footer">
                  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
          </div>
      </div>

      <div id="order_form_html" class="modal">
          <div class="modal-content">
              <h4>Order Form</h4>
              <div class="divider"></div>
              <div class="section">
                  <h5>Template</h5>
                  <pre><code class="django">&lt;form method="POST" class="viewform"&gt;{% verbatim %}{% csrf_token %}{% endverbatim %}{{ order.template.origin.source.rstrip|linebreaksbr }}
    &lt;button type="submit" name="_submit" class="btn btn-primary btn-lg"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
                  </code></pre>
              </div>
              <div class="modal-footer">
                  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
          </div>
      </div>

      <div id="checkout_form_code" class="modal">
          <div class="modal-content">
              <h4>Checkout Form</h4>
              <div class="divider"></div>
              <div class="section">
                  <h5>Code</h5>
                  <pre><code class="python">{{ checkout.source.rstrip|linebreaksbr }}</code></pre>
              </div>
              <div class="modal-footer">
                  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
          </div>
      </div>

      <div id="checkout_form_html" class="modal">
          <div class="modal-content">
              <h4>Checkout Form</h4>
              <div class="divider"></div>
              <div class="section">
                  <h5>Template</h5>
                  <pre><code class="html">&lt;style type="text/css"&gt;{{ checkout.css.rstrip|linebreaksbr }}
&lt;/style&gt;</code><code class="django">&lt;form method="POST" class="viewform"&gt;{% verbatim %}{% csrf_token %}{% endverbatim %}{{ checkout.template.origin.source.rstrip|linebreaksbr }}
    &lt;button type="submit" name="_submit" class="btn btn-primary btn-lg"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
                  </code></pre>
              </div>
              <div class="modal-footer">
                  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
          </div>
      </div>

      <div id="bank_form_code" class="modal">
          <div class="modal-content">
              <h4>Personal Bank Account Application Form</h4>
              <div class="divider"></div>
              <div class="section">
                  <h5>Code</h5>
                  <pre><code class="python">{{ bank.source.rstrip|linebreaksbr }}</code></pre>
              </div>
              <div class="modal-footer">
                  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
          </div>
      </div>

      <div id="bank_form_html" class="modal">
          <div class="modal-content">
              <h4>Personal Bank Account Application Form</h4>
              <div class="divider"></div>
              <div class="section">
                  <h5>Template</h5>
                  <pre><code class="html">&lt;style type="text/css"&gt;{{ bank.css.rstrip|linebreaksbr }}
&lt;/style&gt;</code><code class="django">&lt;form method="POST" class="viewform"&gt;{% verbatim %}{% csrf_token %}{% endverbatim %}{{ bank.template.origin.source.rstrip|linebreaksbr }}
    &lt;button type="submit" name="_submit" class="btn btn-primary btn-lg"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
                  </code></pre>
              </div>
              <div class="modal-footer">
                  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
          </div>
      </div>

      <div id="hospital_form_code" class="modal">
          <div class="modal-content">
              <h4>Hospital Registration Form</h4>
              <div class="divider"></div>
              <div class="section">
                  <h5>Code</h5>
                  <pre><code class="python">{{ hospital.source.rstrip|linebreaksbr }}</code></pre>
              </div>
              <div class="modal-footer">
                  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
          </div>
      </div>

  </body>
</html>
